<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="Author" content="FengYu">
    <title>小米官网项目实战</title>
    <link rel="stylesheet" href="css/index.min.css">
    <link rel="stylesheet" href="font/iconfont.css">
</head>
<body id="body">
<!--header start-->
<div id="header">
    <div class="h_main">
        <div class="h_m_left">
            <ul>
                <li><a href="">小米上</a>|</li>
                <li><a href="">MIUI</a>|</li>
                <li><a href="">密聊</a>|</li>
                <li><a href="">游戏</a>|</li>
                <li><a href="">多看阅读</a>|</li>
                <li><a href="">云服务</a>|</li>
                <li><a href="">金融</a>|</li>
                <li><a href="">小米网移动版</a>|</li>
                <li><a href="">问题反馈</a>|</li>
                <li><a href="">Select Region</a></li>
            </ul>
        </div>
        <div class="h_m_right">
            <ul class="h_m_r_login">
                <li><a href="">登录</a></li>
                <li><a href="">注册</a></li>
                <li><a href="">通知消息</a></li>
            </ul>
            <div class="h_m_r_buy">
                <a href="" class="buy">
                    <span class="iconfont icon-gouwuche">购物车</span>
                </a>
                <div class="hide">
                    购物车还没有内容，赶紧选购吧
                </div>
            </div>
        </div>
    </div>
</div>
<!--header end-->
<!--nav start-->
<div id="nav">
    <div class="nav_content">
        <!--logo-->
        <div class="n_logo">
            <a href="">
                <img src="img/mi-logo.png" width="49" height="49" alt="小米官网">
            </a>
        </div>
        <!--主导航-->
        <div class="n_main">
            <ul>
                <li class="product"><a>小米手机</a></li>
                <li class="product"><a>红米</a></li>
                <li class="product"><a>平板。笔记本</a></li>
                <li class="product"><a>电视</a></li>
                <li class="product"><a>盒子。影音</a></li>
                <li class="product"><a>路由器</a></li>
                <li class="product">智能硬件<a></a></li>
                <li><a href="">服务</a></li>
                <li><a href="">社区</a></li>
            </ul>
        </div>
        <!--搜索框-->
        <div class="n_search">
            <div class="n_s_input">
                <input type="text">
                <a href="" class="a1 tip">小米MIX</a>
                <a href="" class="a2 tip">人工智能电视</a>
                <div class="hide">
                    <ul>
                        <li><a href="http://www.baidu.com"><span class="s1">小米5s plus</span><span class="s2">越有2件</span></a></li>
                        <li><a href=""><span class="s1">小米产品</span><span class="s2">约有20件</span></a></li>
                        <li><a href=""><span class="s1">小米产品</span><span class="s2">约有20件</span></a></li>
                        <li><a href=""><span class="s1">小米产品</span><span class="s2">约有20件</span></a></li>
                        <li><a href=""><span class="s1">小米产品</span><span class="s2">约有20件</span></a></li>
                        <li><a href=""><span class="s1">小米产品</span><span class="s2">约有20件</span></a></li>
                        <li><a href=""><span class="s1">小米产品</span><span class="s2">约有20件</span></a></li>
                        <li><a href=""><span class="s1">小米产品</span><span class="s2">约有20件</span></a></li>
                        <li><a href=""><span class="s1">小米产品</span><span class="s2">约有20件</span></a></li>
                        <li><a href=""><span class="s1">小米产品</span><span class="s2">约有20件</span></a></li>
                        <li><a href=""><span class="s1">小米产品</span><span class="s2">约有20件</span></a></li>
                    </ul>
                </div>
            </div>
            <div class="n_s_btn">
                <span class="iconfont icon-sousuo"></span>
            </div>

        </div>
    </div>
    <div class="nav_hide">
        <div class="n_h_main">
            <!--小米手机-->
            <ul>
                <li>
                    <div class="img"><img src="img/nav/1/1.jpg" alt="" width="160" height="110"></div>
                    <p class="name">小米NOTE2</p>
                    <p class="price">2799元</p>
                </li>
                <li>
                    <div class="img"><img src="img/nav/1/2.jpg" alt="" width="160" height="110"></div>
                    <p class="name">小米5s</p>
                    <p class="price">488元起</p>
                </li>
                <li>
                    <div class="img"><img src="img/nav/1/3.jpg" alt="" width="160" height="110"></div>
                    <p class="name">小米MIX</p>
                    <p class="price">2222元</p>
                </li>
                <li>
                    <div class="img"><img src="img/nav/1/4.jpg" alt="" width="160" height="110"></div>
                    <p class="name">红米plus</p>
                    <p class="price">666元</p>
                </li>
                <li>
                    <div class="img"><img src="img/nav/1/5.jpg" alt="" width="160" height="110"></div>
                    <p class="name">小米5</p>
                    <p class="price">5888元</p>
                </li>
                <li>
                    <div class="img" style="border: none;"><img src="img/nav/1/6.jpg" alt="" width="160" height="110"></div>
                    <p class="name">小米10</p>
                    <p class="price">1000元</p>
                </li>
            </ul>
            <!--红米-->
            <ul>
                <li>
                    <div class="img"><img src="img/nav/4/1.png" alt="" width="160" height="110"></div>
                    <p class="name">洪米NOTE2</p>
                    <p class="price">2799元</p>
                </li>
                <li>
                    <div class="img"><img src="img/nav/4/2.png" alt="" width="160" height="110"></div>
                    <p class="name">红米5s</p>
                    <p class="price">488元起</p>
                </li>
                <li>
                    <div class="img"><img src="img/nav/4/3.png" alt="" width="160" height="110"></div>
                    <p class="name">红米MIX</p>
                    <p class="price">2222元</p>
                </li>
                <li>
                    <div class="img"><img src="img/nav/4/4.png" alt="" width="160" height="110"></div>
                    <p class="name">红米plus</p>
                    <p class="price">666元</p>
                </li>
                <li>
                    <div class="img"><img src="img/nav/4/5.png" alt="" width="160" height="110"></div>
                    <p class="name">红米5</p>
                    <p class="price">5888元</p>
                </li>
                <li>
                    <div class="img" style="border: none;"><img src="img/nav/1/6.jpg" alt="" width="160" height="110"></div>
                    <p class="name">红米10</p>
                    <p class="price">1000元</p>
                </li>
            </ul>
        </div>
    </div>
</div>
<!--nav end-->

<!--banner start-->
<div id="banner">
    <div class="b_main">
        <div class="b_m_pic">
            <ul>
                <li><a href=""><img src="img/banner/1.jpg" alt=""></a></li>
                <li><a href=""><img src="img/banner/2.jpg" alt=""></a></li>
                <li><a href=""><img src="img/banner/3.jpg" alt=""></a></li>
                <li><a href=""><img src="img/banner/4.jpg" alt=""></a></li>
                <li><a href=""><img src="img/banner/5.jpg" alt=""></a></li>
            </ul>   
        </div>
        <div class="b_m_tab">
            <ul>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
            </ul>
        </div>
        <div class="b_m_btn">
            <div class="btn left"></div>
            <div class="btn right"></div>
        </div>
    </div>
    <div class="b_nav">
    	<ul>
    		<li class="firstLi">
    			<a href=""><span class="s1">手机电话卡</span><span class="s2 iconfont icon-youjiantou"></span></a>
    			<div class="info">
    				<ul>
    					<li><a href="" class="title"><img src="img/banner/nav/1/1.jpg" alt="" /><span>小米手机</span></a><a href="" class="buy">选购</a></li>
    					<li><a href="" class="title"><img src="img/banner/nav/1/2.jpg" alt="" /><span>小米手机</span></a><a href="" class="buy">选购</a></li>
    					<li><a href="" class="title"><img src="img/banner/nav/1/3.jpg" alt="" /><span>小米手机</span></a><a href="" class="buy">选购</a></li>
    					<li><a href="" class="title"><img src="img/banner/nav/1/4.jpg" alt="" /><span>小米手机</span></a><a href="" class="buy">选购</a></li>
    					<li><a href="" class="title"><img src="img/banner/nav/1/5.jpg" alt="" /><span>小米手机</span></a><a href="" class="buy">选购</a></li>
    					<li><a href="" class="title"><img src="img/banner/nav/1/6.jpg" alt="" /><span>小米手机</span></a><a href="" class="buy">选购</a></li>
    					<li><a href="" class="title"><img src="img/banner/nav/1/7.jpg" alt="" /><span>小米手机</span></a><a href="" class="buy">选购</a></li>
    					<li><a href="" class="title"><img src="img/banner/nav/1/8.jpg" alt="" /><span>小米手机</span></a><a href="" class="buy">选购</a></li>
    					<li><a href="" class="title"><img src="img/banner/nav/1/9.jpg" alt="" /><span>小米手机</span></a><a href="" class="buy">选购</a></li>
    					<li><a href="" class="title"><img src="img/banner/nav/1/10.jpg" alt="" /><span>小米n</span></a><a href="" class="buy">选购</a></li>
    					<li><a href="" class="title"><img src="img/banner/nav/1/11.jpg" alt="" /><span>小米n</span></a><a href="" class="buy">选购</a></li>
    					<li><a href="" class="title"><img src="img/banner/nav/1/12.jpg" alt="" /><span>小米n</span></a><a href="" class="buy">选购</a></li>
    					<li><a href="" class="title"><img src="img/banner/nav/1/13.jpg" alt="" /><span>小米n</span></a><a href="" class="buy">选购</a></li>
    					<li><a href="" class="title"><img src="img/banner/nav/1/14.jpg" alt="" /><span>小米n</span></a><a href="" class="buy">选购</a></li>
    					<li><a href="" class="title"><img src="img/banner/nav/1/15.jpg" alt="" /><span>小米n</span></a><a href="" class="buy">选购</a></li>
    					<li><a href="" class="title"><img src="img/banner/nav/1/16.jpg" alt="" /><span>小米n</span></a><a href="" class="buy">选购</a></li>
    				</ul>
    			</div>
    		</li>
    		<li class="firstLi">
    			<a href=""><span class="s1">笔记本</span><span class="s2 iconfont icon-youjiantou"></span></a>
    			<div class="info">
    				<ul>
    					<li><a href="" class="title"><img src="img/banner/nav/2/1.jpg" alt="" /><span>小米手机</span></a><a href="" class="buy">选购</a></li>
    					<li><a href="" class="title"><img src="img/banner/nav/2/2.png" alt="" /><span>小米手机</span></a><a href="" class="buy">选购</a></li>
    					<li><a href="" class="title"><img src="img/banner/nav/2/3.jpg" alt="" /><span>小米手机</span></a><a href="" class="buy">选购</a></li>
    					<li><a href="" class="title"><img src="img/banner/nav/2/4.jpg" alt="" /><span>小米手机</span></a><a href="" class="buy">选购</a></li>
    					<li><a href="" class="title"><img src="img/banner/nav/2/5.jpg" alt="" /><span>小米手机</span></a><a href="" class="buy">选购</a></li>
    				</ul>
    				
    			</div>
    		</li>
    		<li class="firstLi">
    			<a href=""><span class="s1">平板</span><span class="s2 iconfont icon-youjiantou"></span></a>
    			<div class="info">
    				<ul>
    					<li><a href="" class="title"><img src="img/banner/nav/3/1.jpg" alt="" /><span>小米手机</span></a><a href="" class="buy">选购</a></li>
    					<li><a href="" class="title"><img src="img/banner/nav/3/2.jpg" alt="" /><span>小米手机</span></a><a href="" class="buy">选购</a></li>
    					<li><a href="" class="title"><img src="img/banner/nav/3/3.png" alt="" /><span>小米手机</span></a><a href="" class="buy">选购</a></li>
    					<li><a href="" class="title"><img src="img/banner/nav/3/4.png" alt="" /><span>小米手机</span></a><a href="" class="buy">选购</a></li>
    					<li><a href="" class="title"><img src="img/banner/nav/3/5.png" alt="" /><span>小米手机</span></a><a href="" class="buy">选购</a></li>
    					<li><a href="" class="title"><img src="img/banner/nav/3/6.jpg" alt="" /><span>小米手机</span></a><a href="" class="buy">选购</a></li>
    					<li><a href="" class="title"><img src="img/banner/nav/3/7.jpg" alt="" /><span>小米手机</span></a><a href="" class="buy">选购</a></li>
    					<li><a href="" class="title"><img src="img/banner/nav/3/8.jpg" alt="" /><span>小米手机</span></a><a href="" class="buy">选购</a></li>
    					<li><a href="" class="title"><img src="img/banner/nav/3/9.png" alt="" /><span>小米手机</span></a><a href="" class="buy">选购</a></li>
    					<li><a href="" class="title"><img src="img/banner/nav/3/10.jpg" alt="" /><span>小米n</span></a><a href="" class="buy">选购</a></li>
    					<li><a href="" class="title"><img src="img/banner/nav/3/11.jpg" alt="" /><span>小米n</span></a><a href="" class="buy">选购</a></li>
    					<li><a href="" class="title"><img src="img/banner/nav/3/12.jpg" alt="" /><span>小米n</span></a><a href="" class="buy">选购</a></li>
    					<li><a href="" class="title"><img src="img/banner/nav/3/13.jpg" alt="" /><span>小米n</span></a><a href="" class="buy">选购</a></li>
    					<li><a href="" class="title"><img src="img/banner/nav/3/14.jpg" alt="" /><span>小米n</span></a><a href="" class="buy">选购</a></li>
    					<li><a href="" class="title"><img src="img/banner/nav/3/15.jpg" alt="" /><span>小米n</span></a><a href="" class="buy">选购</a></li>
    					<li><a href="" class="title"><img src="img/banner/nav/3/16.jpg" alt="" /><span>小米n</span></a><a href="" class="buy">选购</a></li>
    					<li><a href="" class="title"><img src="img/banner/nav/3/17.jpg" alt="" /><span>小米n</span></a><a href="" class="buy">选购</a></li>
    					<li><a href="" class="title"><img src="img/banner/nav/3/18.jpg" alt="" /><span>小米n</span></a><a href="" class="buy">选购</a></li>
    				</ul>
    			</div>
    		</li>
    		<li class="firstLi">
    			<a href=""><span class="s1">电视盒子</span><span class="s2 iconfont icon-youjiantou"></span></a>
    			<div class="info">
    				<ul>
    					<li><a href="" class="title"><img src="img/banner/nav/1/1.jpg" alt="" /><span>小米手机</span></a><a href="" class="buy">选购</a></li>
    					<li><a href="" class="title"><img src="img/banner/nav/4/2.jpg" alt="" /><span>小米手机</span></a><a href="" class="buy">选购</a></li>
    					<li><a href="" class="title"><img src="img/banner/nav/4/3.jpg" alt="" /><span>小米手机</span></a><a href="" class="buy">选购</a></li>
    					<li><a href="" class="title"><img src="img/banner/nav/4/4.jpg" alt="" /><span>小米手机</span></a><a href="" class="buy">选购</a></li>
    					<li><a href="" class="title"><img src="img/banner/nav/4/5.jpg" alt="" /><span>小米手机</span></a><a href="" class="buy">选购</a></li>
    					<li><a href="" class="title"><img src="img/banner/nav/4/6.jpg" alt="" /><span>小米手机</span></a><a href="" class="buy">选购</a></li>
    					<li><a href="" class="title"><img src="img/banner/nav/4/7.jpg" alt="" /><span>小米手机</span></a><a href="" class="buy">选购</a></li>
    					<li><a href="" class="title"><img src="img/banner/nav/4/8.jpg" alt="" /><span>小米手机</span></a><a href="" class="buy">选购</a></li>
    					<li><a href="" class="title"><img src="img/banner/nav/4/9.jpg" alt="" /><span>小米手机</span></a><a href="" class="buy">选购</a></li>
    					<li><a href="" class="title"><img src="img/banner/nav/4/10.jpg" alt="" /><span>小米n</span></a><a href="" class="buy">选购</a></li>
    					<li><a href="" class="title"><img src="img/banner/nav/4/11.jpg" alt="" /><span>小米n</span></a><a href="" class="buy">选购</a></li>
    					<li><a href="" class="title"><img src="img/banner/nav/4/12.jpg" alt="" /><span>小米n</span></a><a href="" class="buy">选购</a></li>
    					<li><a href="" class="title"><img src="img/banner/nav/4/13.jpg" alt="" /><span>小米n</span></a><a href="" class="buy">选购</a></li>
    					<li><a href="" class="title"><img src="img/banner/nav/4/14.jpg" alt="" /><span>小米n</span></a><a href="" class="buy">选购</a></li>
    					<li><a href="" class="title"><img src="img/banner/nav/4/15.jpg" alt="" /><span>小米n</span></a><a href="" class="buy">选购</a></li>
    					<li><a href="" class="title"><img src="img/banner/nav/4/16.jpg" alt="" /><span>小米n</span></a><a href="" class="buy">选购</a></li>
    					<li><a href="" class="title"><img src="img/banner/nav/4/17.jpg" alt="" /><span>小米n</span></a><a href="" class="buy">选购</a></li>
    					<li><a href="" class="title"><img src="img/banner/nav/4/18.jpg" alt="" /><span>小米n</span></a><a href="" class="buy">选购</a></li>
    					<li><a href="" class="title"><img src="img/banner/nav/4/19.jpg" alt="" /><span>小米n</span></a><a href="" class="buy">选购</a></li>
      					<li><a href="" class="title"><img src="img/banner/nav/4/20.jpg" alt="" /><span>小米n</span></a><a href="" class="buy">选购</a></li>
      				</ul>	
    			</div>
    		</li>
    		<li class="firstLi">
    			<a href=""><span class="s1">路由器 智能硬件</span><span class="s2 iconfont icon-youjiantou"></span></a>
    			<div class="info"></div>
    		</li>
    		<li class="firstLi">
    			<a href=""><span class="s1">移动电源</span><span class="s2 iconfont icon-youjiantou"></span></a>
    			<div class="info"></div>
    		</li>
    		<li class="firstLi">
    			<a href=""><span class="s1">耳机音响</span><span class="s2 iconfont icon-youjiantou"></span></a>
    			<div class="info"></div>
    		</li>
    		<li class="firstLi">
    			<a href=""><span class="s1">保护套 贴膜</span><span class="s2 iconfont icon-youjiantou"></span></a>
    			<div class="info"></div>
    		</li>
    		<li class="firstLi">
    			<a href=""><span class="s1">线材 支架 存储卡</span><span class="s2 iconfont icon-youjiantou"></span></a>
    			<div class="info"></div>
    		</li>
    		<li class="firstLi">
    			<a href=""><span class="s1">箱包 服饰</span><span class="s2 iconfont icon-youjiantou"></span></a>
    			<div class="info"></div>
    		</li>
    	</ul>
    </div>
</div>
<!--banner end-->
<!--ad start-->
	<div id="ad">
		<div class="a_left">
			<ul>
				<li><a><span class="iconfont icon-unie639"></span><span class="txt">选购手机</span></a><i class="right"></i><i class="bottom"></i></li>
				<li><a><span class="iconfont icon-icon"></span><span class="txt">企业团购</span></a><i class="right"></i><i class="bottom"></i></li>
				<li><a><span class="iconfont icon-xunhuan"></span><span class="txt">官方产品</span></a><i class="bottom"></i></li>
				<li><a><span class="iconfont icon-simqia"></span><span class="txt">小米移动</span></a><i class="right"></i></li>
				<li><a><span class="iconfont icon-yijiuhuanxin"></span><span class="txt">以旧换新</span></a><i class="right"></i></li>
				<li><a><span class="iconfont icon-qia"></span><span class="txt">花费充值</span></a></li>
			</ul>
		</div>
		<div class="a_right">
			<a href=""><img src="img/ad/1.jpg" alt="" width="auto" height="170" /></a>
			<a href=""><img src="img/ad/2.jpg" alt="" width="auto" height="170" /></a>
			<a href=""><img src="img/ad/3.jpg" alt="" width="auto" height="170" /></a>
		</div>
	</div>

<!--ad end-->
<!--star start-->
	<div id="star">
		<h2>小米明星产品</h2>
		<div class="s_btn">
			<span class="left iconfont icon-arrow-left"></span>
			<span class="right iconfont icon-youjiantou able"></span>
		</div>
		<div class="s_show">
			<ul>
				<li style="border-color: #ff3366;">
					<a href="" class="img">
						<img src="img/star/1.png" alt="" width="160" height="160" />
					</a>
					<a href="" class="title">小米5s Plus</a>
					<span class="dec">5.7英寸大屏双摄手机， 拍照黑科技</span>
					<span class="price">2299起</span>
					
				</li>
				<li style="border-color: #6666ff;">
					<a href="" class="img">
						<img src="img/star/2.png" alt="" width="160" height="160" />
					</a>
					<a href="" class="title">小米5s Plus</a>
					<span class="dec">5.7英寸大屏双摄手机， 拍照黑科技</span>
					<span class="price">2299起</span>
					
				</li>
				<li style="border-color: #00ff99;"> 
					<a href="" class="img">
						<img src="img/star/3.png" alt="" width="160" height="160" />
					</a>
					<a href="" class="title">小米5s Plus</a>
					<span class="dec">5.7英寸大屏双摄手机， 拍照黑科技</span>
					<span class="price">2299起</span>
					
				</li>
				<li style="border-color: #cc9933;">
					<a href="" class="img">
						<img src="img/star/4.png" alt="" width="160" height="160" />
					</a>
					<a href="" class="title">小米5s Plus</a>
					<span class="dec">5.7英寸大屏双摄手机， 拍照黑科技</span>
					<span class="price">2299起</span>
				</li>
				<li class="last" style="border-color: #0099ff;">
					<a href="" class="img">
						<img src="img/star/5.png" alt="" width="160" height="160" />
					</a>
					<a href="" class="title">小米5s Plus</a>
					<span class="dec">5.7英寸大屏双摄手机， 拍照黑科技</span>
					<span class="price">2299起</span>
				</li>
			</ul>
			<ul>
				<li>
					<a href="" class="img">
						<img src="img/star/6.png" alt="" width="160" height="160" />
					</a>
					<a href="" class="title">小米5s Plus</a>
					<span class="dec">5.7英寸大屏双摄手机， 拍照黑科技</span>
					<span class="price">2299起</span>
				</li>
				<li>
					<a href="" class="img">
						<img src="img/star/7.jpg" alt="" width="160" height="160" />
					</a>
					<a href="" class="title">小米5s Plus</a>
					<span class="dec">5.7英寸大屏双摄手机， 拍照黑科技</span>
					<span class="price">2299起</span>
				</li>
				<li>
					<a href="" class="img">
						<img src="img/star/8.png" alt="" width="160" height="160" />
					</a>
					<a href="" class="title">小米5s Plus</a>
					<span class="dec">5.7英寸大屏双摄手机， 拍照黑科技</span>
					<span class="price">2299起</span>
				</li>
				<li>
					<a href="" class="img">
						<img src="img/star/9.jpg" alt="" width="160" height="160" />
					</a>
					<a href="" class="title">小米5s Plus</a>
					<span class="dec">5.7英寸大屏双摄手机， 拍照黑科技</span>
					<span class="price">2299起</span>
				</li>
				<li class="last">
					<a href="" class="img">
						<img src="img/star/10.jpg" alt="" width="160" height="160" />
					</a>
					<a href="" class="title">小米5s Plus</a>
					<span class="dec">5.7英寸大屏双摄手机， 拍照黑科技</span>
					<span class="price">2299起</span>
				</li>
			</ul>
		</div>
	</div>
<!--star end-->
<!--content start-->
	<div id="content">
		<!--smart start-->
		<div id="smart">
			<h2>智能硬件</h2>
			<a class="all" href="">查看全部<span class="iconfont icon-iconfontyoujiantou"></span></a>
			<div class="s_content">
				<div class="s_c_left">
					<a href=""><img src="img/match/4/left.jpg" alt="" /></a>
				</div>
				<div class="s_c_right">
					<ul>
						<li class="shadow">
							<a href="" class="img"><img src="img/match/4/1.jpg" alt="" width="160" height="160" /></a>
							<a href="" class="title">小米路由器</a>
							<span class="dec">四天线设计，更快更强</span>
							<span class="price">149元</span>
							<p class="tip youzengpin">有赠品</p>
						</li>
						<li class="shadow">
							<a href="" class="img"><img src="img/match/4/2.jpg" alt="" width="160" height="160" /></a>
							<a href="" class="title">小米路由器</a>
							<span class="dec">四天线设计，更快更强</span>
							<span class="price">149元</span>
							<p class="tip mianyoufei">新品</p>
						</li>
						<li class="shadow">
							<a href="" class="img"><img src="img/match/4/3.jpg" alt="" width="160" height="160" /></a>
							<a href="" class="title">小米路由器</a>
							<span class="dec">四天线设计，更快更强</span>
							<span class="price">149元</span>
							<p class="tip mianyoufei">免邮费</p>
						</li>
						<li class="shadow">
							<a href="" class="img"><img src="img/match/4/4.jpg" alt="" width="160" height="160" /></a>
							<a href="" class="title">小米路由器</a>
							<span class="dec">四天线设计，更快更强</span>
							<span class="price">149元</span>
							<p class="tip mianyoufei">免邮费</p>
						</li>
						<li class="shadow">
							<a href="" class="img"><img src="img/match/4/5.jpg" alt="" width="160" height="160" /></a>
							<a href="" class="title">小米路由器</a>
							<span class="dec">四天线设计，更快更强</span>
							<span class="price">149元</span>
						</li>
						<li class="shadow">
							<a href="" class="img"><img src="img/match/4/6.jpg" alt="" width="160" height="160" /></a>
							<a href="" class="title">小米路由器</a>
							<span class="dec">四天线设计，更快更强</span>
							<span class="price">149元</span>
						</li>
						<li class="shadow">
							<a href="" class="img"><img src="img/match/4/7.jpg" alt="" width="160" height="160" /></a>
							<a href="" class="title">小米路由器</a>
							<span class="dec">四天线设计，更快更强</span>
							<span class="price">149元</span>
						</li>
						<li class="shadow">
							<a href="" class="img"><img src="img/match/4/8.jpg" alt="" width="160" height="160" /></a>
							<a href="" class="title">小米路由器</a>
							<span class="dec">四天线设计，更快更强</span>
							<span class="price">149元</span>
						</li>
					</ul>
				</div>
			</div>
		</div>
		<!--smart end-->
		<!--match start-->
		<div id="match">
			<div class="m_title">
				<h2>搭配</h2>
				<ul>
					<li>热门</li>
					<li>耳机音响</li>
					<li>电源</li>
					<li>电池存储卡</li>
				</ul>
			</div>
			<div class="m_content">
				<div class="m_c_left">
					<a href=""><img src="img/match/left1.jpg" width='240' height="300" alt="" /></a>
					<a href=""><img src="img/match/left2.jpg" width='240' height="300"  alt="" /></a>
				</div>
				<div class="m_c_right">
				<ul>
					<li class="shadow above">
						<a href="" class="img"><img src="img/match/4/1.jpg" alt="" width="160" height="160" /></a>
						<a href="" class="title">小米路由器</a>
						<span class="dec">四天线设计，更快更强</span>
						<span class="price">149元</span>
						<p class="tip youzengpin">有赠品</p>
						<p class="comments">
							<a href="">
								<span class="s1">很小巧 很好看哈哈哈哈哈哈哈哈哈哈哈....</span>
								<span class="s2">评论来自赵大宝</span>
							</a>
						</p>
					</li>
					<li class="shadow above">
						<a href="" class="img"><img src="img/match/4/2.jpg" alt="" width="160" height="160" /></a>
						<a href="" class="title">小米路由器</a>
						<span class="dec">四天线设计，更快更强</span>
						<span class="price">149元</span>
						<p class="tip mianyoufei">新品</p>
						<p class="comments">
							<a href="">
								<span class="s1">很小巧 很好看哈哈哈哈哈哈哈哈哈哈哈....</span>
								<span class="s2">评论来自赵大宝</span>
							</a>
						</p>
					</li>
					<li class="shadow above">
						<a href="" class="img"><img src="img/match/4/3.jpg" alt="" width="160" height="160" /></a>
						<a href="" class="title">小米路由器</a>
						<span class="dec">四天线设计，更快更强</span>
						<span class="price">149元</span>
						<p class="tip mianyoufei">免邮费</p>
						<p class="comments">
							<a href="">
								<span class="s1">很小巧 很好看哈哈哈哈哈哈哈哈哈哈哈....</span>
								<span class="s2">评论来自赵大宝</span>
							</a>
						</p>
					</li>
					<li class="shadow above">
						<a href="" class="img"><img src="img/match/4/4.jpg" alt="" width="160" height="160" /></a>
						<a href="" class="title">小米路由器</a>
						<span class="dec">四天线设计，更快更强</span>
						<span class="price">149元</span>
						<p class="tip mianyoufei">免邮费</p>
						<p class="comments">
							<a href="">
								<span class="s1">很小巧 很好看哈哈哈哈哈哈哈哈哈哈哈....</span>
								<span class="s2">评论来自赵大宝</span>
							</a>
						</p>
					</li>
					<li class="shadow above">
						<a href="" class="img"><img src="img/match/4/5.jpg" alt="" width="160" height="160" /></a>
						<a href="" class="title">小米路由器</a>
						<span class="dec">四天线设计，更快更强</span>
						<span class="price">149元</span>
						<p class="comments">
							<a href="">
								<span class="s1">很小巧 很好看哈哈哈哈哈哈哈哈哈哈哈....</span>
								<span class="s2">评论来自赵大宝</span>
							</a>
						</p>
					</li>
					<li class="shadow above">
						<a href="" class="img"><img src="img/match/4/6.jpg" alt="" width="160" height="160" /></a>
						<a href="" class="title">小米路由器</a>
						<span class="dec">四天线设计，更快更强</span>
						<span class="price">149元</span>
					</li>
					<li class="shadow above">
						<a href="" class="img"><img src="img/match/4/7.jpg" alt="" width="160" height="160" /></a>
						<a href="" class="title">小米路由器</a>
						<span class="dec">四天线设计，更快更强</span>
						<span class="price">149元</span>
					</li>
					<li class="shadow eight">
						<a href="" class="title">小钢炮蓝牙耳机</a>
						<span class="price">99元</span>
						<a href="" class="img"><img src="img/match/4/8.jpg" alt="" width="80" height="80" /></a>
					</li>
					<li class="shadow nine">
						<a href="" class="first">浏览器</a>
						<a href="" class="second">热门</a>
						<a href="" class="third"><span class="iconfont icon-right-arrow-circle f-s-54"></span></a>
					</li>
				</ul>
				<ul>
					<li class="shadow above">
						<a href="" class="img"><img src="img/match/4/1.jpg" alt="" width="160" height="160" /></a>
						<a href="" class="title">小米路由器</a>
						<span class="dec">四天线设计，更快更强</span>
						<span class="price">149元</span>
						<p class="tip youzengpin">有赠品</p>
					</li>
					<li class="shadow above">
						<a href="" class="img"><img src="img/match/4/2.jpg" alt="" width="160" height="160" /></a>
						<a href="" class="title">小米路由器</a>
						<span class="dec">四天线设计，更快更强</span>
						<span class="price">149元</span>
						<p class="tip mianyoufei">新品</p>
					</li>
					<li class="shadow above">
						<a href="" class="img"><img src="img/match/4/3.jpg" alt="" width="160" height="160" /></a>
						<a href="" class="title">小米路由器</a>
						<span class="dec">四天线设计，更快更强</span>
						<span class="price">149元</span>
						<p class="tip mianyoufei">免邮费</p>
					</li>
					<li class="shadow above">
						<a href="" class="img"><img src="img/match/4/4.jpg" alt="" width="160" height="160" /></a>
						<a href="" class="title">小米路由器</a>
						<span class="dec">四天线设计，更快更强</span>
						<span class="price">149元</span>
						<p class="tip mianyoufei">免邮费</p>
					</li>
					<li class="shadow above">
						<a href="" class="img"><img src="img/match/4/5.jpg" alt="" width="160" height="160" /></a>
						<a href="" class="title">小米路由器</a>
						<span class="dec">四天线设计，更快更强</span>
						<span class="price">149元</span>
					</li>
					<li class="shadow above">
						<a href="" class="img"><img src="img/match/4/6.jpg" alt="" width="160" height="160" /></a>
						<a href="" class="title">小米路由器</a>
						<span class="dec">四天线设计，更快更强</span>
						<span class="price">149元</span>
					</li>
					<li class="shadow above">
						<a href="" class="img"><img src="img/match/4/7.jpg" alt="" width="160" height="160" /></a>
						<a href="" class="title">小米路由器</a>
						<span class="dec">四天线设计，更快更强</span>
						<span class="price">149元</span>
					</li>
					<li class="shadow eight">
						<a href="" class="title">小钢炮蓝牙耳机</a>
						<span class="price">99元</span>
						<a href="" class="img"><img src="img/match/4/8.jpg" alt="" width="80" height="80" /></a>
					</li>
					<li class="shadow nine">
						<a href="" class="first">浏览器</a>
						<a href="" class="second">热门</a>
						<a href="" class="third"><span class="iconfont icon-right-arrow-circle f-s-54"></span></a>
					</li>
				</ul>
				<ul>
					<li class="shadow above">
						<a href="" class="img"><img src="img/img/match/3/1.jpg" alt="" width="160" height="160" /></a>
						<a href="" class="title">小米路由器</a>
						<span class="dec">四天线设计，更快更强</span>
						<span class="price">149元</span>
						<p class="tip youzengpin">有赠品</p>
					</li>
					<li class="shadow above">
						<a href="" class="img"><img src="img/img/match/3/2.jpg" alt="" width="160" height="160" /></a>
						<a href="" class="title">小米路由器</a>
						<span class="dec">四天线设计，更快更强</span>
						<span class="price">149元</span>
						<p class="tip mianyoufei">新品</p>
					</li>
					<li class="shadow above">
						<a href="" class="img"><img src="img/img/match/3/3.jpg" alt="" width="160" height="160" /></a>
						<a href="" class="title">小米路由器</a>
						<span class="dec">四天线设计，更快更强</span>
						<span class="price">149元</span>
						<p class="tip mianyoufei">免邮费</p>
					</li>
					<li class="shadow above">
						<a href="" class="img"><img src="img/img/match/3/4.jpg" alt="" width="160" height="160" /></a>
						<a href="" class="title">小米路由器</a>
						<span class="dec">四天线设计，更快更强</span>
						<span class="price">149元</span>
						<p class="tip mianyoufei">免邮费</p>
					</li>
					<li class="shadow above">
						<a href="" class="img"><img src="img/img/match/3/5.jpg" alt="" width="160" height="160" /></a>
						<a href="" class="title">小米路由器</a>
						<span class="dec">四天线设计，更快更强</span>
						<span class="price">149元</span>
					</li>
					<li class="shadow above">
						<a href="" class="img"><img src="img/img/match/3/6.jpg" alt="" width="160" height="160" /></a>
						<a href="" class="title">小米路由器</a>
						<span class="dec">四天线设计，更快更强</span>
						<span class="price">149元</span>
					</li>
					<li class="shadow above">
						<a href="" class="img"><img src="img/img/match/3/7.jpg" alt="" width="160" height="160" /></a>
						<a href="" class="title">小米路由器</a>
						<span class="dec">四天线设计，更快更强</span>
						<span class="price">149元</span>
					</li>
					<li class="shadow eight">
						<a href="" class="title">小钢炮蓝牙耳机</a>
						<span class="price">99元</span>
						<a href="" class="img"><img src="img/img/match/3/8.jpg" alt="" width="80" height="80" /></a>
					</li>
					<li class="shadow nine">
						<a href="" class="first">浏览器</a>
						<a href="" class="second">热门</a>
						<a href="" class="third"><span class="iconfont icon-right-arrow-circle f-s-54"></span></a>
					</li>
				</ul>
				<ul>
					<li class="shadow above">
						<a href="" class="img"><img src="img/match/4/1.jpg" alt="" width="160" height="160" /></a>
						<a href="" class="title">小米路由器</a>
						<span class="dec">四天线设计，更快更强</span>
						<span class="price">149元</span>
						<p class="tip youzengpin">有赠品</p>
					</li>
					<li class="shadow above">
						<a href="" class="img"><img src="img/match/4/2.jpg" alt="" width="160" height="160" /></a>
						<a href="" class="title">小米路由器</a>
						<span class="dec">四天线设计，更快更强</span>
						<span class="price">149元</span>
						<p class="tip mianyoufei">新品</p>
					</li>
					<li class="shadow above">
						<a href="" class="img"><img src="img/match/4/3.jpg" alt="" width="160" height="160" /></a>
						<a href="" class="title">小米路由器</a>
						<span class="dec">四天线设计，更快更强</span>
						<span class="price">149元</span>
						<p class="tip mianyoufei">免邮费</p>
					</li>
					<li class="shadow above">
						<a href="" class="img"><img src="img/match/4/4.jpg" alt="" width="160" height="160" /></a>
						<a href="" class="title">小米路由器</a>
						<span class="dec">四天线设计，更快更强</span>
						<span class="price">149元</span>
						<p class="tip mianyoufei">免邮费</p>
					</li>
					<li class="shadow above">
						<a href="" class="img"><img src="img/match/4/5.jpg" alt="" width="160" height="160" /></a>
						<a href="" class="title">小米路由器</a>
						<span class="dec">四天线设计，更快更强</span>
						<span class="price">149元</span>
					</li>
					<li class="shadow above">
						<a href="" class="img"><img src="img/match/4/6.jpg" alt="" width="160" height="160" /></a>
						<a href="" class="title">小米路由器</a>
						<span class="dec">四天线设计，更快更强</span>
						<span class="price">149元</span>
					</li>
					<li class="shadow above">
						<a href="" class="img"><img src="img/match/4/7.jpg" alt="" width="160" height="160" /></a>
						<a href="" class="title">小米路由器</a>
						<span class="dec">四天线设计，更快更强</span>
						<span class="price">149元</span>
					</li>
					<li class="shadow eight">
						<a href="" class="title">小钢炮蓝牙耳机</a>
						<span class="price">99元</span>
						<a href="" class="img"><img src="img/match/4/8.jpg" alt="" width="80" height="80" /></a>
					</li>
					<li class="shadow nine">
						<a href="" class="first">浏览器</a>
						<a href="" class="second">热门</a>
						<a href="" class="third"><span class="iconfont icon-right-arrow-circle f-s-54"></span></a>
					</li>
				</ul>
			</div>
			</div>
		</div>
		<!--match end-->
		<!--content start-->
			<div id="neirong">
				<h2></h2>
				<div class="n_content">
					<ul class="ul1">
						<li class="li1" style="border-top: 1px solid #f60;">
							<p class="title" style="color: #60">图书</p>
							<ul class="ul2">
								<li class="li2">
									<a href="" class="name">哈利波特与被祝福的孩子</a>
									<a href="" class="dec">哈利波特第八个故事中文版只能喊来袭！！！</a>
									<a href="" class="price">27.37元</a>
									<a href="" class="img"><img src="img/neirong/1/1.png" alt="" width="216" height="154" /></a>
								</li>
								<li class="li2">
									<a href="" class="name">哈利波特与被祝福的孩子</a>
									<a href="" class="dec">哈利波特第八个故事中文版只能喊来袭！！！</a>
									<a href="" class="price">27.37元</a>
									<a href="" class="img"><img src="img/neirong/1/2.png" alt="" width="216" height="154" /></a>
								</li>
								<li class="li2">
									<p class="dec"><a href="">哈利波特与被祝福的孩子</a></p>
									<p class="dec"><a href="" >哈利波特第八个故事中文版只能喊来袭！！！</a></p>
									<p class="link"><a href="">前往多看阅读</a></p>
									<a href="" class="img"><img src="img/neirong/1/3.jpg" alt="" width="216" height="154" /></a>
								</li>
							</ul>
							<ul class="tab" style="width:108px">
								<li class="tabLi on"></li>
								<li class="tabLi"></li>
								<li class="tabLi"></li>
							</ul>
							<div class="btn">
								<div class="left"> < </div>
								<div class="right"> > </div>
							</div>
						</li>
						<li class="li1" style="border-top: 1px solid #f60;">
							<p class="title">MIUI</p>
							<ul class="ul2">
								<li class="li2">
									<a href="" class="name">哈利波特与被祝福的孩子</a>
									<a href="" class="dec">哈利波特第八个故事中文版只能喊来袭！！！</a>
									<a href="" class="price">27.37元</a>
									<a href="" class="img"><img src="img/neirong/1/1.png" alt="" width="216" height="154" /></a>
								</li>
								<li class="li2">
									<a href="" class="name">哈利波特与被祝福的孩子</a>
									<a href="" class="dec">哈利波特第八个故事中文版只能喊来袭！！！</a>
									<a href="" class="price">27.37元</a>
									<a href="" class="img"><img src="img/neirong/1/1.png" alt="" width="216" height="154" /></a>
								</li>
								<li class="li2">
									<a href="" class="name">哈利波特与被祝福的孩子</a>
									<a href="" class="dec">哈利波特第八个故事中文版只能喊来袭！！！</a>
									<a href="" class="price">27.37元</a>
									<a href="" class="img"><img src="img/neirong/1/1.png" alt="" width="216" height="154" /></a>
								</li>
								<li class="li2">
									<a href="" class="name">哈利波特与被祝福的孩子</a>
									<a href="" class="dec">哈利波特第八个故事中文版只能喊来袭！！！</a>
									<a href="" class="price">27.37元</a>
									<a href="" class="img"><img src="img/neirong/1/1.png" alt="" width="216" height="154" /></a>
								</li>
							</ul>
							<ul class="tab">
								<li class="tabLi"></li>
								<li class="tabLi"></li>
								<li class="tabLi"></li>
								<li class="tabLi"></li>
							</ul>
							<div class="btn">
								<div class="left"> < </div>
								<div class="right"> > </div>
							</div>
						</li>
						<li class="li1" style="border-top: 1px solid #f60;">
							<p class="title">标题</p>
							<ul class="ul2">
								<li class="li2">
									<a href="" class="name">哈利波特与被祝福的孩子</a>
									<a href="" class="dec">哈利波特第八个故事中文版只能喊来袭！！！</a>
									<a href="" class="price">27.37元</a>
									<a href="" class="img"><img src="img/neirong/1/1.png" alt="" width="216" height="154" /></a>
								</li>
								<li class="li2">
									<a href="" class="name">哈利波特与被祝福的孩子</a>
									<a href="" class="dec">哈利波特第八个故事中文版只能喊来袭！！！</a>
									<a href="" class="price">27.37元</a>
									<a href="" class="img"><img src="img/neirong/1/1.png" alt="" width="216" height="154" /></a>
								</li>
								<li class="li2">
									<a href="" class="name">哈利波特与被祝福的孩子</a>
									<a href="" class="dec">哈利波特第八个故事中文版只能喊来袭！！！</a>
									<a href="" class="price">27.37元</a>
									<a href="" class="img"><img src="img/neirong/1/1.png" alt="" width="216" height="154" /></a>
								</li>
								<li class="li2">
									<a href="" class="name">哈利波特与被祝福的孩子</a>
									<a href="" class="dec">哈利波特第八个故事中文版只能喊来袭！！！</a>
									<a href="" class="price">27.37元</a>
									<a href="" class="img"><img src="img/neirong/1/1.png" alt="" width="216" height="154" /></a>
								</li>
							</ul>
							<ul class="tab">
								<li class="tabLi"></li>
								<li class="tabLi"></li>
								<li class="tabLi"></li>
								<li class="tabLi"></li>
							</ul>
							<div class="btn">
								<div class="left"> < </div>
								<div class="right"> > </div>
							</div>
						</li>
						<li class="li1" style="border-top: 1px solid #00ff99;">
							<p class="title" style="color: #00ff99">标题</p>
							<ul class="ul2">
								<li class="li2">
									<a href="" class="name">哈利波特与被祝福的孩子</a>
									<a href="" class="dec">哈利波特第八个故事中文版只能喊来袭！！！</a>
									<a href="" class="price">27.37元</a>
									<a href="" class="img"><img src="img/neirong/1/1.png" alt="" width="216" height="154" /></a>
								</li>
								<li class="li2">
									<a href="" class="name">哈利波特与被祝福的孩子</a>
									<a href="" class="dec">哈利波特第八个故事中文版只能喊来袭！！！</a>
									<a href="" class="price">27.37元</a>
									<a href="" class="img"><img src="img/neirong/1/1.png" alt="" width="216" height="154" /></a>
								</li>
								<li class="li2">
									<a href="" class="name">哈利波特与被祝福的孩子</a>
									<a href="" class="dec">哈利波特第八个故事中文版只能喊来袭！！！</a>
									<a href="" class="price">27.37元</a>
									<a href="" class="img"><img src="img/neirong/1/1.png" alt="" width="216" height="154" /></a>
								</li>
								<li class="li2">
									<a href="" class="name">哈利波特与被祝福的孩子</a>
									<a href="" class="dec">哈利波特第八个故事中文版只能喊来袭！！！</a>
									<a href="" class="price">27.37元</a>
									<a href="" class="img"><img src="img/neirong/1/1.png" alt="" width="216" height="154" /></a>
								</li>
							</ul>
							<ul class="tab">
								<li class="tabLi"></li>
								<li class="tabLi"></li>
								<li class="tabLi"></li>
								<li class="tabLi"></li>
							</ul>
							<div class="btn">
								<div class="left"> < </div>
								<div class="right"> > </div>
							</div>
						</li>
					</ul>
				</div>
			</div>
		<!--content end-->
		
		<!--video start-->
			<div id="video">
				<h2>智能硬件</h2>
				<a class="all" href="">查看全部<span class="iconfont icon-iconfontyoujiantou"></span></a>
				<div class="v_content">
					<ul>
						<li class="shadow">
							<a class="img">
								<img src="img/video/1.jpg" alt="" width="296" height="180"/>
								<span class="btn iconfont icon-shipin"></span>
							</a>
							<a class="title" href="">梁朝伟讲述小米note2的冰山理论</a>
							<p class="dec">第一眼看到的美，只有全部创作的八分之一</p>
						</li>
						<li class="shadow">
							<a class="img"><img src="img/video/2.jpg" alt="" width="296" height="180"/><span class="btn iconfont icon-shipin"></span></a>
							<a class="title" href="">梁朝伟讲述小米note2的冰山理论</a>
							<p class="dec">第一眼看到的美，只有全部创作的八分之一</p>
						</li>
						<li class="shadow">
							<a class="img"><img src="img/video/3.jpg" alt="" width="296" height="180"/><span class="btn iconfont icon-shipin"></span></a>
							<a class="title" href="">梁朝伟讲述小米note2的冰山理论</a>
							<p class="dec">第一眼看到的美，只有全部创作的八分之一</p>>
						</li>
						<li class="shadow">
							<a class="img"><img src="img/video/4.jpg" alt="" width="296" height="180"/><span class="btn iconfont icon-shipin"></span></a>
							<a class="title" href="">梁朝伟讲述小米note2的冰山理论</a>
							<p class="dec">第一眼看到的美，只有全部创作的八分之一</p>
						</li>
					</ul>
				</div>
				<!--video cover start-->
				<div class="v_cover">
				<!--	<div class="main">
						<div class="m_title"><span>小米MIX 概念手机背后的故事</span><span class="close"> × </span></div>
						<div class="play">
							<embed src="https://imgcache.qq.com/tencentvideo_v1/playerv3/TPout.swf?max_age=86400&v=20161117&vid=g05282fw99s&auto=0" allowFullScreen="true" quality="high" width="800" height="540" align="middle" allowScriptAccess="always" type="application/x-shockwave-flash"></embed>
						</div>
					</div>-->
				</div>
				<!--video cover end-->
			</div>
		<!--video end-->
		
	</div>
	
<!--content end-->

<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js"></script>
<script src="js/index.js"></script>
</body>
</html>